<template>
    <div class="mainpage ">
        <el-container class="mainpage-container">
            <el-header class="mainpage-container-header" v-show="showTopHeader">
                <div class="mainpage-container-header-left">
                    HuiLY-宠物寄送养网站
                </div>
                <div class="mainpage-container-header-right">
                    <div class="m-c-t-r-msg" v-show="msgList.length" @click="GetMessage">
                        <el-badge :value="msgList.length" :max="10" type="primary">
                            <span>我的信息</span>
                        </el-badge>
                    </div>
                    <div v-show="!msgList.length" class="m-c-t-r-msg" @click="GetMessage">我的信息</div>
                    <el-dropdown trigger="hover" style="margin-right: 50px;" placement="right-start">
                        <span class="m-c-t-r-span">
                            <div class="m-c-t-r-s-img">
                                <img :src="portraitSrc" alt="">
                            </div>
                            <span v-if="accountInfo">{{ accountInfo.userName }}</span>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item divided @click.native="Logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container class="mainpage-container-middle">
                <!-- 左边的导航栏 -->
                <el-aside class="mainpage-container-aside">
                    <menu-tag></menu-tag>
                </el-aside>
                <!-- 中间展示视口 -->
                <el-container class="m-c-m-main">
                    <el-header class="m-c-m-main-navheader">
                        <nav-tag></nav-tag>
                    </el-header>
                    <el-main class="m-c-m-main-main">
                        <keep-alive ref="keepAlive" :include="keepActiveList">
                            <router-view class="m-c-m-main-main-router_view" ref="routerPage" name="mainpage" />
                        </keep-alive>
                    </el-main>
                </el-container>
            </el-container>
            <el-footer class="mainpage-container-footer">
                <span>HuiLY</span>
            </el-footer>
        </el-container>
    </div>
</template>

<script lang="js">
    import menuTag from '@/components/common/menuTag.vue'
    import navTag from '@/components/common/navTab.vue'
    import { mapState } from 'vuex'
    import { baseURL } from '@/config/data.config.js'
    export default {
        name: 'mainPage',
        components: {
            menuTag,
            navTag
        },
        data() {
            return {
                showTopHeader: true,
                msgList: [],
                timer: true,
                portraitSrc: baseURL + '/static/img/baseImg.png',
                keepActiveList: this.$store.state.keepActiveList
            }
        },
        computed: {
            accountInfo() {
                let userinfo = JSON.parse(localStorage.getItem('HuiLY'))
                return userinfo?.userinfo
            }
        },
        methods: {
            // 退出登录
            Logout() {
                window.localStorage.removeItem('HuiLY')
                this.$router.push({ name: 'login' })
                this.$socket?.close(1000, JSON.stringify({ code: 'huily' }))
            },
            changePassword() {
                this.$router.push({
                    path: '/changePassword'
                })
            },
            // 生成含有防抖器的函数
            GetMessage() {
                if (this.timer) {
                    setTimeout(() => {
                        this.timer = true
                    }, 1000)
                    console.log('GetMessage');
                    this.$GET('/message/userUnreadMessage', { userID: this.accountInfo.id })
                        .then((response) => {
                            this.msgList = response.data.data
                        }).catch((response) => {
                            console.log(response);
                        })
                }
                this.timer = false
            },
            GetPortraitSrc() {
                this.$GET('/user/portrait', { userID: this.accountInfo.id })
                    .then((response) => {
                        let data = response.data?.data
                        let url = data.portraitSrc
                        this.portraitSrc = url
                        console.log(response);
                    }).catch(() => { })
            }
        },
        mounted() {
            this.GetMessage()
            this.GetPortraitSrc()
            this.$_initWebSocket({ userID: this.accountInfo.id }).then((socket) => {
                Vue.prototype.$socket = socket
            }).catch(_ => { })
        }
    }
</script>

<style scoped lang="less">
    .mainpage {
        width: 100%;
        height: 100%;
        margin: 0 auto;

        .mainpage-container {
            overflow-x: auto;
            box-sizing: border-box;
            height: 100vh;
            width: 100%;

            .mainpage-container-header {
                height: 60px !important;
                color: black;
                background: rgb(250, 220, 100);
                padding: 0;
                position: relative;
                display: flex;
                width: 100%;

                .mainpage-container-header-left {
                    height: 100%;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 20px;
                    flex: 3;
                    // color: #011F9B;
                    color: rgb(10, 40, 140);
                    font-size: 24px;
                    line-height: 100%;

                }

                .mainpage-container-header-right {
                    width: 100%;
                    height: 100%;
                    flex: 1;
                    line-height: 100%;
                    color: #011F9B;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .m-c-t-r-span {
                        margin-right: 50px;
                        flex: 1;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        font-size: 18px;

                        .m-c-t-r-s-img {
                            display: flex;
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            border: 1px solid var(--main-bg-color);
                            overflow: hidden;
                            justify-content: center;
                            align-items: center;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }
                    }

                    .m-c-t-r-msg {
                        width: 100%;
                        height: 100%;
                        flex: 2;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        font-size: 16px;
                    }
                }
            }

            .mainpage-container-middle {
                width: 100%;
                overflow: auto;

                .mainpage-container-aside {
                    position: relative;
                    max-width: 250px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;

                }

                .m-c-m-main {
                    width: 100%;
                    height: 100%;
                    overflow: auto;

                    .m-c-m-main-navheader {
                        height: 60px !important;
                        background-color: #f8f8f8;
                        padding: 0;
                        border-bottom: 1px solid #FFF;
                    }

                    .m-c-m-main-main {
                        min-width: 400px;
                        margin: 0;
                        padding: 5px 0px 0px 5px;
                        background-color: #eee;
                        display: flex;
                        flex-direction: column;

                        .m-c-m-main-main-router_view {
                            margin: 0 auto;
                            padding: 5px;
                            background-color: white;
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            -webkit-box-flex: 1;
                            -ms-flex: 1;
                            -ms-flex-preferred-size: auto;
                            flex-basis: auto;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                            flex-shrink: 0;
                        }
                    }
                }

            }

            .mainpage-container-footer {
                position: relative;
                width: 100%;
                height: 30px !important;
                padding: 0;
                display: flex;
                flex-direction: row;
                justify-content: center;
                color: black;
                background: rgb(254, 224, 100);
                text-align: center;
                line-height: 30px;
            }
        }

    }
</style>